<template>
  <div>
    <!-- 属性动态绑定 -->
    <a v-bind:href="href">去百度</a>
    <a :href="href">去百度</a>
    <a href="href">去百度</a>
    <!-- 事件绑定 -->
    <!-- v-on:click ,dblclick,keyup,input  -->
    <button v-on:click="count++">{{ count }}</button>
    <button @click="fn">按钮</button>
    <button @click="fn($event)">按钮</button>
    <!-- <button @click="fn1(2,3,4)">按钮</button> -->
    <div class="abc aaa" :class="{ a: true }">1234</div>
    <div>{{ num }}</div>
    <input type="text" v-model="a" />
    <input type="text" v-model="b" />
    <p>{{ result }}</p>

    <hr />
    <input type="text" v-model.lazy.trim="firstName" />
    <input type="text" v-model.lazy.trim="lastName" />
    <input type="text" v-model.lazy.trim="fullName" />

    <hr />
    <input
      type="text"
      v-if="flag"
      v-model="msg"
      ref="input"
      @blur="showDiv"
      @keyup.enter="$event.target.blur()"
    />
    <div v-else @dblclick="showInput">{{ msg }}</div>

    <hr />
    <!-- 父向子可以传任意类型数据 -->
    <!-- <MySon :value="msg" @input="msg = $event"></MySon> -->
    <MySon v-model="msg">
      <template #abc="scope">
        <h1>{{ scope.money }}</h1>
      </template>
    </MySon>
  </div>
</template>

<script>
import MySon from "@/components/MySon.vue";
// 在模板中不能加this 加了就错了 在js中必须加this
export default {
  data() {
    return {
      href: "http://www.baidu.com",
      count: 1,
      list: [
        { id: 1, name: "吃饭", done: false },
        { id: 2, name: "睡觉", done: true },
        { id: 3, name: "打豆豆", done: false },
      ],
      a: 0,
      b: 0,
      result: 0,
      username: "",
      firstName: "",
      lastName: "",
      msg: 1111,
      flag: false,
    };
  },
  methods: {
    fn() {
      console.log(this);
      this.count++;
    },
    showInput() {
      // this.a = 1
      // this.b = 2
      // this.a =3
      this.flag = true;
      // setTimeout是宏任务 nextTick底层先看看promise.then,setTimeout
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
      // setTimeout(() => {
      //   this.$refs.input.focus();
      // });
    },
    showDiv() {
      this.flag = false;
    },
  },
  computed: {
    num() {
      return this.list.filter((item) => item.done === true).length;
    },
    // result(){
    //   return this.a + this.b
    // }
    // fullName() {
    //   // bill gates
    //   return this.firstName + " " + this.lastName;
    // },
    fullName: {
      get() {
        return this.firstName + " " + this.lastName;
      },
      set(value) {
        const arr = value.split(" ");
        console.log(arr);
        this.firstName = arr[0];
        this.lastName = arr[1];
      },
    },
  },
  watch: {
    a(newVal) {
      this.result = +this.b + +newVal;
    },
    // b(newVal) {
    //   this.result = +this.a + +newVal;
    // },
    b: {
      handler(newVal) {
        this.result = +this.a + +newVal;
      },
      deep: true, //数据是对象或数组的时候 引用类型 复杂类型 深度监听
      immediate: true, //立即监听
    },
  },
  components: {
    MySon,
  },
};
</script>

<style scoped></style>
